<!DOCTYPE html>
<html>
<head>
    <title>API</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
        <div id="example">
            <div class="box">
            <div class="box-col">
                <h4>Expand / Collapse</h4>
                <ul class="options">
                    <li>
                        <input type="text" value="0" id="selectIndex" class="k-textbox"/> <button class="selectItem k-button">Select</button>
                    </li>
                    <li>
                        <button class="triggerItem k-button">Expand/Collapse</button>
                    </li>
                </ul>
            </div>
            <div class="box-col">
                <h4>Enable / Disable</h4>
                <ul class="options">
                    <li>
                        <button class="toggleItem k-button">Enable/Disable</button>
                    </li>
                </ul>
            </div>
            <div class="box-col">
                <h4>Add / Remove</h4>
                <ul class="options">
                    <li>
                        <button class="removeItem k-button">Remove</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="appendText" class="k-textbox"/> <button class="appendItem k-button">Append</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="beforeText" class="k-textbox"/> <button class="beforeItem k-button">Insert Before</button>
                    </li>
                    <li>
                        <input type="text" value="Item" id="afterText" class="k-textbox"/> <button class="afterItem k-button">Insert After</button>
                    </li>

                </ul>
            </div>
            </div>

            <ul id="panelbar">
                <li class="k-state-active">
                    First Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Second Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Third Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Fourth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
                <li>
                    Fifth Item
                    <ul>
                        <li>Sub Item 1</li>
                        <li>Sub Item 2</li>
                        <li>Sub Item 3</li>
                        <li>Sub Item 4</li>
                    </ul>
                </li>
            </ul>

            <script>
                 $(document).ready(function() {
                    var getItem = function (target) {
                            var itemIndexes = target.val().split(/[.,]/),
                                rootItem = panelBar.element.children("li").eq(itemIndexes[0]);

                            return itemIndexes.length > 1 ?
                                rootItem.find(".k-group > .k-item").eq(itemIndexes[1]) :
                                rootItem;
                        },
                        select = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.select(getItem($("#selectIndex")));
                        },
                        append = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.append({
                                        text: $("#appendText").val()
                                    }, panelBar.select());
                        },
                        before = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.insertBefore({
                                    text: $("#beforeText").val()
                                }, panelBar.select());
                        },
                        after = function (e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                panelBar.insertAfter({
                                    text: $("#afterText").val()
                                }, panelBar.select());
                        };

                    $(".selectItem").click(select);
                    $("#selectIndex").keypress(select);

                    $(".appendItem").click(append);
                    $("#appendText").keypress(append);

                    $(".beforeItem").click(before);
                    $("#beforeText").keypress(before);

                    $(".afterItem").click(after);
                    $("#afterText").keypress(after);

                    $(".toggleItem").click(function (e) {
                        var item = panelBar.select();
                        panelBar.enable(item, item.hasClass("k-state-disabled"));
                    });

                    $(".triggerItem").click(function (e) {
                        var item = panelBar.select();

                        if (item.hasClass("k-state-active")) {
                            panelBar.collapse(item);
                        } else {
                            panelBar.expand(item);
                        }
                    });

                    $(".removeItem").click(function (e) {
                        panelBar.remove(panelBar.select());
                    });

                });

                var panelBar = $("#panelbar").kendoPanelBar().data("kendoPanelBar");
            </script>
            <style scoped>
                .box-col {
                    width: 200px;
                }
                .box .k-textbox {
                    width: 80px;
                }
            </style>
        </div>


    
    
</body>
</html>
